<template>
  <div class="operationBasicsDetail">

    <div class="header">
     
      <van-nav-bar title="添加供应商" left-text="" left-arrow @click-left="goBack" />
    </div>
    <div class="add_supplier">
      <div class="add_supplier-background">
        <van-form @submit="onSubmit" validate-first scroll-to-error>
          <van-cell-group inset>
            <van-field name="recruiterDept" label="合作部门" input-align="right"
              v-model="addSupplierQueryParams.recruiterDept" readonly disabled placeholder="请选择" />
            <van-popup v-model:show="showRecruiterDept" position="bottom">
              <van-picker :columns="recruiterDeptColumns" @confirm="onConfirmRecruiterDept"
                @cancel="showRecruiterDept = false" />
            </van-popup>
          </van-cell-group>
          <van-cell-group inset>
            <van-field name="recruiter" label="合作人员" input-align="right" v-model="addSupplierQueryParams.recruiter"
              readonly disabled placeholder="请选择" />
            <van-popup v-model:show="showRecruiter" position="bottom">
              <van-picker :columns="recruiterColumns" @confirm="onConfirmRecruiter" @cancel="showRecruiter = false" />
            </van-popup>
          </van-cell-group>
          <van-cell-group inset>
            <van-field input-align="right" name="supplierName" error-message-align="right" label="供应商名称" maxlength="20"
              v-model="addSupplierQueryParams.supplierName" placeholder="请输入供应商名称" required :rules="[
                {
                  required: true,
                  trigger: 'onBlur',
                  message: '请输入供应商名称',
                },
                {
                  validator: validatorNumbers,
                  message: '请输入正确的供应商名称',
                },
              ]" />
          </van-cell-group>
          <van-cell-group inset>
            <van-field name="supplierType" label="供应商类型" input-align="right" error-message-align="right"
              v-model="addSupplierQueryParams.supplierType"  readonly placeholder="请选择供应商类型"
              @click="showSupplierType = true" required :rules="[
                { required: true, trigger: 'onBlur', message: '请选择贸易方式' },
              ]" >
                <template #right-icon>
                    <van-icon name="arrow" size="3.733333vw" color="#B9BABB"/>
                </template>   
              </van-field>
            <van-popup v-model:show="showSupplierType" position="bottom">
              <van-picker title="供应商类型" active-class="showSupplierType-style" :show-toolbar="true"
                :columns="supplierTypeColumns" @confirm="onConfirmSupplierType" @cancel="showSupplierType = false"
                v-model="supplierType" />
            </van-popup>
          </van-cell-group>
          
          <van-cell-group inset>
            <van-field name="contactName" label="联系人" input-align="right" error-message-align="right"
              v-model="addSupplierQueryParams.contactName" placeholder="请输入联系人姓名" maxlength="10" required :rules="[
                { required: true, trigger: 'onBlur', message: '请输入联系人' },
                { validator: validatorContact, message: '请输入中文或点·' },
              ]" />
          </van-cell-group>
          <formNumberKeyboard :formRef="formRef" name="phone" label="联系电话"
            v-model:keyValue="addSupplierQueryParams.phone" placeholder="请输入联系电话" required readonly :rules="[
              { required: true, trigger: 'onBlur', message: '请输入联系电话' },
              { validator: validatorPhone, message: '请输入有效电话' },
            ]" />
          <van-cell-group inset>
            <van-field v-model="addSupplierQueryParams.addr"  readonly input-align="right"
              error-message-align="right" name="addr" label="厂家地址" placeholder="点击选择省市区" @click="showAddress = true"
              required :rules="[
                { required: true, trigger: 'onBlur', message: '请选择厂家地址' },
              ]" >
              <template #right-icon>
                    <van-icon name="arrow" size="3.733333vw" color="#B9BABB"/>
                </template>    
            </van-field>
            <van-popup v-model:show="showAddress" position="bottom">
              <van-area title="厂家地址" :area-list="areaList" @confirm="onConfirmAddress" @cancel="showAddress = false"
                v-model="addr" />
            </van-popup>
          </van-cell-group>
          <van-cell-group inset>
            <van-field name="address" input-align="right" error-message-align="right" label="详细地址" maxlength="100"
              v-model="addSupplierQueryParams.address" placeholder="请输入详细地址" required
              @input="(e) => { forbidRule(e, 'address', 'emoji') }" :rules="[
                { required: true, trigger: 'onBlur', message: '请输入详细地址' }
              ]" />
          </van-cell-group>
          
          <van-cell-group inset>
            <van-field input-align="right" name="storeId" error-message-align="right" label="店铺ID"
              v-model="addSupplierQueryParams.storeId" placeholder="请输入快手ID" :maxlength="50" />
          </van-cell-group>
          <van-cell-group inset>
            <van-field input-align="right" name="storeType" error-message-align="right" label="店铺类型"
              v-model="addSupplierQueryParams.storeType" placeholder="请输入快手店铺类型" :maxlength="50" :rules="[
                {
                  validator: validatorStoreType,
                  message: '只能输入中文',
                },
              ]" />
          </van-cell-group>
          <van-cell-group inset>
            <van-field input-align="right" name="storeGrade" error-message-align="right" label="店铺评分"
              v-model="addSupplierQueryParams.storeGrade" placeholder="请输入快手店铺评分" :rules="[
                {
                  validator: validatorStoreGrade,
                  trigger: 'onChange',
                  message: '0-100内数字，最大小数点后两位',
                },
              ]" />
          </van-cell-group>
          <van-cell-group inset>
            <van-field name="companyCode" label="统一社会信用代码" input-align="right" error-message-align="right"
              v-model="addSupplierQueryParams.companyCode" placeholder="请输入统一社会信用代码" :rules="[
                {
                  validator: validatorCompanyCode,
                  message: '请输入正确统一社会信用代码',
                },
              ]" />
          </van-cell-group>
          <van-cell-group inset>
            <van-field v-model="addSupplierQueryParams.businessAddr"  readonly input-align="right"
              error-message-align="right" name="businessAddr" label="营业执照所在地" placeholder="点击选择省市区"
              @click="showBusinessAddress = true" >
              <template #right-icon>
                  <van-icon name="arrow" size="3.733333vw" color="#B9BABB"/>
              </template> 
            </van-field>
            <van-popup v-model:show="showBusinessAddress" position="bottom">
              <van-area title="营业执照所在地" :area-list="areaList" @confirm="onConfirmBusinessAddress"
                @cancel="showBusinessAddress = false" v-model="businessAddr" />
            </van-popup>
          </van-cell-group>
          <van-cell-group inset>
            <van-field name="businessDate" label="营业执照有效期" input-align="right" error-message-align="right"
              v-model="addSupplierQueryParams.businessDate"  readonly placeholder="请选择"
              @click="showBusinessDate = true">
                    <template #right-icon>
                        <van-icon name="arrow" size="3.733333vw" color="#B9BABB"/>
                    </template> 
              </van-field>
            <van-popup v-model:show="showBusinessDate" position="bottom">
              <van-picker title="营业执照有效期" active-class="showSupplierType-style" :show-toolbar="true"
                :columns="businessDateColumns" @confirm="onConfirmBusinessDate" @cancel="showBusinessDate = false"
                v-model="businessDate" />
            </van-popup>
          </van-cell-group>
          <div class="image-title">
            营业执照
          </div>
          <van-cell-group class="imgform" inset>
            <van-field name="营业执照" label="">
              <template #input>
                <UpLoadDom :arr="businessImageList || []" @deleteClick="deleteImg"  width="90" height="90"
                  @postImageClick="postImage('businessImage', 1)" :max-count="1" :isPdfLook="true" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="image-title">
            其他资质
          </div>
          <van-cell-group class="imgform" inset>
            <van-field name="其他资质" label="" v-model="addSupplierQueryParams.otherImage">
              <template #input>
                <UpLoadDom :arr="otherImageList || []" @deleteClick="deleteImg"  width="90" height="90"
                  @postImageClick="postImage('otherImage', 5)" :max-count="5" :isPdfLook="true" />
              </template>
            </van-field>
          </van-cell-group>
          <div class="addtive_div-btn">
            <div class="addtive_div">
              <van-button class="bt_l" round block type="primary" @click.prevent="addSupplierClass">
                现有供应商增类
              </van-button>
            </div>
            <div style="" class="addtive_div">
              <van-button round block :loading="loading" loading-text="执行中..." type="primary" native-type="submit"
                v-throttle:click>
                保存
              </van-button>
            </div>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getDicts, getUserById } from "@/api/productList/index";
import { getInfo, getDept } from "@/api/supplierList/index";
import { areaList } from "@vant/area-data";
import { onUnmounted, ref } from "vue";
import { useRouter } from "vue-router";
import { addHmSupplier } from "@/api/supplierList/index";
import { showSuccessToast, showFailToast } from "vant";
import { getEnvValue } from "@/utils/index";
import { loginStore } from "@/store/login";
import { storeToRefs } from "pinia";
import formNumberKeyboard from '@/components/formNumberKeyboard/index.vue'
import { handleImageUpdate } from "@/utils/handleImageUpdate";
import UpLoadDom from '@/components/isImgPdf/upLoadDom.vue'
const store = loginStore();
const { token } = storeToRefs(store);
const supplierType = ref<any[]>([]);
const businessDate = ref<any[]>([]);
const formRef = ref()
const addSupplierQueryParams = ref({
  supplierName: "",
  supplierType: "",
  addr: "",
  address: "",
  contactName: "",
  phone: "",
  recruiterDept: "",
  recruiter: "",
  companyCode: "",
  businessAddr: "",
  businessDate: "",
  businessImage: "",
  storeId: "",
  storeType: "",
  storeGrade: "",
  otherImage: '',
});


const loading = ref(false)
const addr = ref("");
const businessAddr = ref("");

const otherImageList = ref<any[]>([]);

const router = useRouter();
const showSupplierType = ref(false);
const supplierTypeColumns = ref([
  {
    text: "供应链",
    value: "0",
  },
  {
    text: "源头厂家",
    value: "0",
  },
]);
const businessDateColumns = ref([
  {
    text: "1年",
    value: "1",
  },
  {
    text: "10年",
    value: "10",
  },
  {
    text: "20年",
    value: "20",
  },
  {
    text: "长期",
    value: "0",
  },
]);
const showAddress = ref(false);
const showRecruiterDept = ref();
const recruiterDeptColumns = ref([]);
const showRecruiter = ref(false);
const recruiterColumns = ref([]);
const showBusinessAddress = ref(false);
const showBusinessDate = ref(false);
const businessImageList = ref<any[]>([]);

// 输入事件、禁用规则
const forbidRule = (e: any, key: string, type: string) => {
  // 输入法表情默认不能输入
  if (type == 'emoji') {
    // emoji：输入时禁用输入法表情
    addSupplierQueryParams.value[key] = e.target.value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
  } else if (type == 'blank') {
    // blank：输入时禁用空格
    addSupplierQueryParams.value[key] = e.target.value.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
  }
}
const validatorPhone = (val) => {
  return /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(val);
}
const validatorNumbers = (val) => /^[\u0020-\u007e\u4e00-\u9fa5]+$/.test(val);
const validatorCompanyCode = (val) => {
  if (val) {
    return /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/.test(
      val
    );
  } else {
    return true;
  }
};
// 店铺类型验证，只能输入中文
const validatorStoreType = (val) => {
  if (val) {
    return /^[\u4e00-\u9fa5]+$/.test(val)
  } else {
    return true
  }
};
// 联系人验证函数，只能输入中文跟·
const validatorContact = (val) => /^[\u4e00-\u9fa5·]+$/.test(val);
// 店铺评分验证函数，0-100之间的整数，保留小数点后两位
const validatorStoreGrade = (val) => {
  if (val) {
    return /^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/.test(val);
  } else {
    return true;
  }
};
/** 获取账号对应的招商部招商员 */
const getUserInfo = async () => {
  const res = await getInfo();
  addSupplierQueryParams.value.recruiter = res.data.user.nickName;
  const response = await getDept(res.data.user.deptId);
  addSupplierQueryParams.value.recruiterDept = response.data.deptName;
};
getUserInfo();
/** 供应商类型 */
const getSupplierType = async () => {
  const res = await getDicts("hm_supplier_type");
  res.data.forEach((element) => {
    element.text = element.dictLabel;
    element.value = element.dictValue;
  });
  supplierTypeColumns.value = res.data;
};
getSupplierType();
/** 供应商类型关闭 */
const onConfirmSupplierType = ({ selectedOptions }) => {
  addSupplierQueryParams.value.supplierType = selectedOptions[0]?.text;
  showSupplierType.value = false;
  supplierType.value = [selectedOptions[0]?.text];
};
/** 营业执照有效期关闭 */
const onConfirmBusinessDate = ({ selectedOptions }) => {
  addSupplierQueryParams.value.businessDate = selectedOptions[0]?.text;
  showBusinessDate.value = false;
  businessDate.value = [selectedOptions[0]?.text];
};
/** 厂家地址关闭 */
const onConfirmAddress = ({ selectedOptions }) => {
  addSupplierQueryParams.value.addr =
    selectedOptions[0]?.text +
    "-" +
    selectedOptions[1]?.text +
    "-" +
    selectedOptions[2]?.text;
  showAddress.value = false;
  addr.value = selectedOptions[selectedOptions.length - 1].value;
};
/** 营业执照所在地关闭 */
const onConfirmBusinessAddress = ({ selectedOptions }) => {
  addSupplierQueryParams.value.businessAddr =
    selectedOptions[0]?.text +
    "-" +
    selectedOptions[1]?.text +
    "-" +
    selectedOptions[2]?.text;
  showBusinessAddress.value = false;
  businessAddr.value = selectedOptions[selectedOptions.length - 1].value;
};
/** 招商部关闭 */
const onConfirmRecruiterDept = async ({ selectedOptions }) => {
  // 根据招商部获取招商员
  const res = await getUserById(selectedOptions[0].deptId);
  res.data.forEach((element) => {
    element.text = element.nickName;
    element.value = element.userId;
  });
  recruiterColumns.value = res.data;
  addSupplierQueryParams.value.recruiter = "";

  addSupplierQueryParams.value.recruiterDept = selectedOptions[0]?.text;
  showRecruiterDept.value = false;
};
/** 招商员关闭 */
const onConfirmRecruiter = ({ selectedOptions }) => {
  addSupplierQueryParams.value.recruiter = selectedOptions[0]?.text;
  showRecruiter.value = false;
};
/** 返回上一页 */
const goBack = () => {
  router.push('/home/index')
}
/** 供应商增类 */
const addSupplierClass = () => {
  router.push(`/addSupplierClass`);
};
/**
 * 图片全路径转半路径
 * @param list 
 */
const getPicByfullPath = (list: any[]) => {
  if (list.length > 0) {
    const updatedList = list.map((item: any) => {
      return item.url.split(getEnvValue("VITE_APP_PIC_URL"))[1];
    });
    return updatedList.join(',');
  } else {
    return '';
  }
}
//保存
const onSubmit = async () => {
  loading.value = true
  try {
    await addHmSupplier({
      ...addSupplierQueryParams.value,
      addrValues: addr.value,
      businessImage: getPicByfullPath(businessImageList.value)
    });
    loading.value = false
    showSuccessToast({ type: "success", message: "新增供应商成功" });
    // 删除app切换导致得缓存数据问题 清除
    localStorage.removeItem("addSupplierQueryParams");
    localStorage.removeItem("addr");
    localStorage.removeItem("businessAddr");
    addSupplierQueryParams.value = {
      supplierName: "",
      supplierType: "",
      addr: "",
      address: "",
      contactName: "",
      phone: "",
      recruiterDept: "",
      recruiter: "",
      companyCode: "",
      businessAddr: "",
      businessDate: "",
      businessImage: "",
      storeId: "",
      storeType: "",
      storeGrade: "",
      otherImage: '',
    };
    addr.value = "";
    businessAddr.value = "";
    businessImageList.value && localStorage.removeItem("businessImageList");
    businessImageList.value = [];
    router.back();
  } catch (error) {
    if (error == 'timeout') {
      showFailToast('新增供应商失败');
    }
    loading.value = false
  }
};
/** app端隐藏触发保存表单 */
(window as any).saveState = function (arg) {
  if (arg.action == "save") {
    localStorage.setItem("addSupplierQueryParams", JSON.stringify(addSupplierQueryParams.value));
    localStorage.setItem("addr", JSON.stringify(addr.value));
    localStorage.setItem("businessAddr", JSON.stringify(businessAddr.value));
    if (businessImageList.value.length > 0) {
      localStorage.setItem(
        "businessImageList",
        JSON.stringify(businessImageList.value)
      );
    }
  }
};
/** 离开页面、提交移除本地存储 */
onUnmounted(() => {
  // 删除app切换导致得缓存数据问题 清除
  localStorage.removeItem("addSupplierQueryParams");
  localStorage.removeItem("addr");
  localStorage.removeItem("businessAddr");
  addSupplierQueryParams.value = {
    supplierName: "",
    supplierType: "",
    addr: "",
    address: "",
    contactName: "",
    phone: "",
    recruiterDept: "",
    recruiter: "",
    companyCode: "",
    businessAddr: "",
    businessDate: "",
    businessImage: "",
    storeId: "",
    storeType: "",
    storeGrade: "",
    otherImage: '',
  };
  businessImageList.value && localStorage.removeItem("businessImageList");
  businessImageList.value = [];
  addr.value = "";
  businessAddr.value = "";
});
/** app端重新打开后数据保存重新渲染 */
const rendering = () => {
  if (localStorage.getItem("addSupplierQueryParams")) {
    addSupplierQueryParams.value = JSON.parse(
      localStorage.getItem("addSupplierQueryParams") as string
    );
    addr.value = JSON.parse(localStorage.getItem("addr") as string);
    businessAddr.value = JSON.parse(
      localStorage.getItem("businessAddr") as string
    );
  }
  if (localStorage.getItem("businessImageList")) {
    businessImageList.value = JSON.parse(
      localStorage.getItem("businessImageList") as string
    );
  }
};
rendering();
/** 删除 */
const deleteImg = (list: any, index: number) => {
  list.splice(index, 1);
};
(window as any).msgFromUniapp = function (arg) {
  const imageLists = {
    businessImage: businessImageList.value,
    otherImage: otherImageList.value
  };

  const maxCounts = {
    businessImage: 1,
    otherImage: 5
  };

  const imageList = imageLists[arg.name];
  const maxCount = maxCounts[arg.name];
  handleImageUpdate(imageList, arg, maxCount);

};
const postImage = (name: string, count: number) => {
  (window as any).uni.webView.postMessage({
    data: {
      type: "img",
      count: count,
      name: name,
      url: getEnvValue("VITE_APP_UPLOAD_API") + "/resource/oss/upload",
      header: {
        Authorization: `Bearer ${token.value}`,
        clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
      },
    },
  });
};
</script>
<style lang="less" scoped>
:deep(.van-field__label) {
  width: 120px;
}

.add_supplier {
  background-color: #f6faff;
  width: 100%;
  height: calc(100vh - 90px);
  box-sizing: border-box;
  padding: 10px 15px 94px 15px;
  margin-top: 90px;
  overflow-y: scroll;
}

.add_supplier-background {
  min-height: calc(100vh - 110px);
  background-color: #fff;
  box-sizing: border-box;
  padding-bottom: 20px;
  border-radius: 5px;
  overflow: hidden;
}

:deep(.van-cell-group--inset) {
  margin: 0 !important;
  border-radius: 0 !important;
}

.additive_class {
  // position: fixed;
  font-size: 12px;
  // left: 50%;
  // transform: translateX(-50%);
  margin-bottom: 10px;
  bottom: 70px;
  color: #1466ff;
}

.addtive_div {
  width: 162px;
  height: 44px;
  bottom: 20px;
  text-align: center;
  margin: auto;
  //   margin-top: 200px;
  .bt_l{
    border: 1px solid #0094FF;
    color: #0094FF;
    background-color: #fff;
  }
}

.addtive_div-btn {
  position: fixed;
  width: 100%;
  height: 84px;
  bottom: 0;
  left: 0;
  z-index: 110;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  background-color: #fff;
  box-shadow: 0px 0px 8px 0px rgba(189,195,204,0.5);
  box-sizing: border-box;
  padding: 0 15px;
  // padding-bottom: 120px;
}

:deep(.van-picker-column__item--selected) {
  //   background-color: #f6faff !important;
  //   border-radius: 20px 20px 0px 0px !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
  //   width: 345px !important;
  height: 44px !important;
  background: #f6faff !important;
  border-radius: 5px !important;
}

:deep(.van-picker__confirm) {
  color: #0094ff !important;
}

:deep(.van-picker) {
  border-radius: 20px 20px 0px 0px !important;
}

:deep(.van-popup--bottom) {
  border-radius: 20px 20px 0px 0px !important;
}

// :deep .van-ellipsis {
//   //   color: #0094ff;
// }
:deep(.van-picker-column__item--selected>.van-ellipsis) {
  color: #0094ff;
}

.value {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;

  .imgList {
    position: relative;

    .loading_pic {
      width: 90px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    :deep(.van-image__img) {
      margin-right: 5px;
    }

    :deep(.van-icon) {
      position: absolute;
      top: 0;
      z-index: 100;
      right: 4px;
      font-size: 10px;
      height: 15px;
      width: 15px;
      background-color: #000;
      border-bottom-left-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    :deep(.van-icon-cross:before) {
      margin: 0 0 1px 2px;
    }
  }

  :deep(.van-image__img) {
    width: 77px;
    height: 77px;
  }
}

:deep(.van-nav-bar__left .van-icon) {
  color: #1a1b1c !important;
}

.operationBasicsDetail {
  width: 100%;
  // height: 100vh;
  background: #f6faff;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
  align-content: flex-start;

  .header {
    background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    z-index: 6003;

    :deep(.van-icon-arrow-left) {
      color: #1a1b1c !important;
    }

    :deep(.van-nav-bar) {
      background: none !important;
    }

    :deep(.van-nav-bar__content) {
      background-color: transparent !important;
    }
  }

}
:deep(.van-cell-group--inset) {
  margin: 0 !important;
  border-radius: 0 !important;
}

:deep(.van-form) {
  // height: 100%;
  // overflow-y: scroll;
  background-color: #fff;
  // padding-bottom: 35px !important;
}
:deep(.van-field--disabled){
  background-color: #f3f3f3;
  .van-field__control{
    color: #8492AD !important;
    -webkit-text-fill-color:#8492AD !important;
  }
  div[aria-checked=true] .van-radio__icon{
    color: #0094FF !important;
    -webkit-text-fill-color: #0094FF !important;
  }
}
:deep(.van-cell) {
      padding: 20px 15px;
      position: relative;
      &::after{
         content: "";
         display: block;
         height: 2px;
         width: 315px;
         background-color: #F3F3FF;
      }
      
      
  }
  :deep(.van-cell-group):last-child{

      .van-cell{
          border-bottom: none !important;
      }
      
  }
  :deep(.van-field__label) {
    
      color: #464E5D  !important;
  }

  :deep(.van-field__label--required){
      &::before{
          display: none;
      }
      &::after{
          color: var(--van-field-required-mark-color);
          content: "*";
      }
  }
  .imgform{
    :deep(.van-cell) {
        border-bottom: none !important;
        &::after{
            content: none;
        }
    }
  }
  .image-title {
    font-weight: 400;
    font-size: 14px;
    color: #1a1b1c;
    background-color: #fff;
    padding-left: 16px;
    margin-top: 20px;
  }
</style>
